<template>
  <div class="teacherCourseInfo">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>教学资料管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <div class="table-title-before"></div>
      <el-button-group style="margin-bottom:4px;" class="float-right">
        <el-button type="primary" class="add-pd-26" @click.native.prevent="toAdd()">新增</el-button>
        <el-button type="primary" class="add-pd-26">打印</el-button>
      </el-button-group>
    </div>
    <el-table
      :data="courseInfo"
      style="width: 100%"
      :default-sort="{prop: 'courseName',order:'ascending'}">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="courseName"
        label="课程名称"
        min-width="120"
        sortable>
      </el-table-column>
      <el-table-column
        label="教学资料"
        min-width="120">
        <template scope="scope">
          <el-button @click.native.prevent="getTeachingDocument(scope.row.fileURL)" type="text">{{scope.row.fileName}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        label="上传者"
        min-width="120"
        sortable>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="上传时间"
        min-width="120"
        sortable>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="120">
        <template scope="scope">
          <el-button type="text">下载</el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index,courseInfo,scope.row.documentID)"
            type="text">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'testProgramInfo',
    data() {
      return {
        courseInfo: [{
          courseID:'',
          courseName: '计算机网络教程',
          documentID: 'KC00002',
          fileName: '',
          fileURL: '',
          creator: '',
          createTime: '',
          description: ''

        }],
        trainingCourseID: '',
        url: 'http://localhost:8080/TeachingMIS'
      }
    },
    created () {
      this.res();
    }, 
    methods: {
      res: function () {
        var courseID = this.$route.query.courseID;
        this.$http.post(`${this.url}/teachingDocument/documentList`,
          {
            courseID: courseID

          })
          .then((res) => {
            this.courseInfo = res.body.documentList
          }, (err) => {
            console, log('服务器异常')
          })
      },
      getTeachingDocument(fileURL){
        var url = this.url + fileURL
        window.open(url)
      },
      deleteRow(index, rows, documentID) {
        rows.splice(index, 1)
        this.deleteTDM(documentID)
      },
      deleteTDM(documentID){
        this.$http.post(`${this.url}/teachingDocument/deleteDocument`, {
          documentID: documentID
        })
          .then((res) => {
            console.log('删除成功')
          }, (err) => {
            console, log('服务器异常')
          })
      },
      toAdd(){
    		var courseID = this.$route.query.courseID;
    		this.$router.push({path: 'NewTeachingDocument', query: {courseID: courseID}})
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
